<template>
  <div class="Service_Management_4">
    <div class="query">
      <el-button size="small" icon="el-icon-back" @click="black" type="danger"></el-button>
      <el-input style="width: 300px; display: inline-block; margin: 0 10px" size="small" placeholder="请输入服务编码/名称查询"
        v-model="query.filter.apiName"></el-input>
      <el-button size="small" icon="el-icon-search" @click="getList">搜索</el-button>
      <el-button size="small" icon="el-icon-plus" @click="open(false)" type="primary">新增api</el-button>
    </div>
    <div class="body">
      <div class="main_box" style="margin: 10px; overflow: auto" v-loading="isLoading">
        <transition name="el-fade-in">
          <div v-show="isShow">
            <el-card class="box-card card_item" v-for="i in listItem" :key="i.id" style="width: 280px; height: 110px">
              <p class="del">
                <span @click.stop="del(i.a.id)" class="todo">&nbsp;x&nbsp;</span>
              </p>

              <el-row @click.native="open(i.a)">
                <el-col :span="4">
                  <!-- <el-switch
                v-model="i.Status == 1 ? true : false"
                active-color="rgb(64,158,255)"
                inactive-color="#ccc"
                @change="swich_change(i, $event)"
              >
              </el-switch> -->
                  <!-- <i
                v-if="!i.status"
                :style="
                  i.Status
                    ? 'color:#409eff;font-size:32px;'
                    : 'color:#ccc;font-size:32px'
                "
                :class="i.Status ? 'el-icon-open' : 'el-icon-turn-off'"
              ></i> -->
                  <img src="../../assets/api.png" width="50px" alt="" />
                </el-col>
                <el-col :span="20">
                  <div :title="i.a.name" class="card_item_name">
                    {{ i.a.name }}
                  </div>
                  <div :title="i.a.description" class="card_item_id">
                    <!-- {{ i.a.description }} -->
                    已请求
                    <span style="color: red">{{ i.requestCount }}</span> 次
                    <span style="margin-left: 5px">日志：</span>
                    <el-button v-if="i.a.logSwitch == 0" type="success" round plain icon="el-icon-open" size="mini"
                      @click="btn_change2(i.a, 1)">开</el-button>
                    <el-button v-if="i.a.logSwitch == 1" type="danger" round plain icon="el-icon-turn-off" size="mini"
                      @click="btn_change2(i.a, 0)">关</el-button>
                  </div>
                </el-col>
              </el-row>

              <div class="_card_row">
                操作：
                <!-- <el-switch
                  v-model="!i.a.isDisabled"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  style="display:inline-block;margin-right:20px"
                  @change.stop="btn_change(i.a, $event)"
                >
                </el-switch> -->
                <el-button v-if="!i.a.isDisabled" type="success" round plain icon="el-icon-open" size="mini"
                  @click="btn_change(i.a, false)">开</el-button>
                <el-button v-if="!!i.a.isDisabled" type="danger" round plain icon="el-icon-turn-off" size="mini"
                  @click="btn_change(i.a, true)">关</el-button>
                <!-- <el-button
                  plain
                  icon="el-icon-open"
                  size="mini"
                  @click="test(i.a)"
                  >调试</el-button
                > -->
              </div>
            </el-card>
          </div>
        </transition>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" :before-close="handleClose"
      :close-on-click-modal="false" :append-to-body="true">
      <div style="margin: 20px"></div>
      <el-form label-position="left" label-width="140px" :model="addForm">
        <el-form-item label="名称：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.name" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="描述：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.description" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="版本号：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.versionNumber" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="上游请求方法：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.upstreamHttpMethod" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="上游路径：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.upstreamPathTemplate" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="下游服务地址：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.downstreamHostPort" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="下游路径：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.downstreamPathTemplate" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="下游服务Schema：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.downstreamScheme" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="优先级：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.priority" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="是否启用限流：" style="width: 33%; display: inline-block">
          <el-switch v-model="addForm.enableratelimiting" active-color="rgb(64,158,255)" inactive-color="#ccc">
          </el-switch>
        </el-form-item>
        <el-form-item v-if="addForm.enableratelimiting" label="限制请求数：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.limit" size="small">
          </el-input>
        </el-form-item>
        <el-form-item v-if="addForm.enableratelimiting" label="白名单：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.clientwhitelist" size="small">
          </el-input>
        </el-form-item>
        <el-form-item v-if="addForm.enableratelimiting" label="统计时间段：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.period" size="small">
          </el-input>
        </el-form-item>
        <el-form-item v-if="addForm.enableratelimiting" label="多少秒之后客户端可以重试："
          style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.periodtimespan" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="是否启用熔断：" style="width: 33%; display: inline-block">
          <el-switch v-model="addForm.qosoptions" active-color="rgb(64,158,255)" inactive-color="#ccc">
          </el-switch>
        </el-form-item>
        <el-form-item label="熔断时间：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.durationofbreak" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="超时时间：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.timeoutvalue" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="允许异常请求数：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.exceptionsallowedbeforebreaking" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="是否禁用：" style="width: 33%; display: inline-block">
          <el-switch v-model="addForm.isDisabled" active-color="rgb(64,158,255)" inactive-color="#ccc">
          </el-switch>
        </el-form-item>
        <el-form-item label="排序：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.orderIndex" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="类型名：" style="width: 33%; display: inline-block">
          <el-select v-model="addForm.typeName" placeholder="请选择" size="small">
            <el-option label="临床数据服务类" value="临床数据服务类">
            </el-option>
            <el-option label="管理数据服务类" value="管理数据服务类">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据格式：" style="width: 33%; display: inline-block">
          <el-select v-model="addForm.dataReturnType" placeholder="请选择" size="small">
            <el-option label="Json" value="Json"> </el-option>
            <el-option label="Xml" value="Xml"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btn_ok">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="dialogVisible2" width="1100px" :before-close="handleClose2"
      :close-on-click-modal="false" :append-to-body="true">
      <div style="margin: 20px"></div>
      <el-form label-position="left" label-width="120px" :model="addForm2">
        <el-form-item label="地址：" style="width: 50%; display: inline-block">
          <el-input style="width: 90%" v-model="addForm2.url" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="方法：" style="width: 50%; display: inline-block">
          <el-select v-model="addForm2.flag" placeholder="请选择" size="small">
            <el-option label="POST" value="POST"> </el-option>
            <el-option label="GET" value="GET"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="header：" style="width: 100%; display: inline-block">
          <el-input style="width: 90%" :rows="4" type="textarea" v-model="addForm2.header" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="body：" style="width: 100%; display: inline-block">
          <el-input style="width: 90%" :rows="4" type="textarea" v-model="addForm2.body" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="返回值：" style="width: 100%; display: inline-block">
          <div class="res_box">{{ resData }}</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose2">取 消</el-button>
        <el-button type="primary" @click="btn_ok2">发 送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      query: {
        currentPage: 1,
        pageSize: 999,
        filter: {
          serverId: "",
          apiName: "",
          serverName: "",
          apiType: "",
          serverType: "",
          isDisable: true,
          withDisable: true,
        },
      },
      ModeList: [],
      listItem: [],
      isLoading: false,
      dialogVisible: false,
      dialogVisible2: false,
      addForm: {
        enableratelimiting: false,
        isDisabled: false,
        clientwhitelist: "",
        downstreamHostPort: "",
        downstreamPathTemplate: "",
        downstreamScheme: "",
        durationofbreak: "",
        dyOrgCode: "",
        orderIndex: "",
        port: "",
        status: 0,
        name: "",
        typeName: "",
        orderIndex: "",
        period: "",
        periodtimespan: "",
        priority: "",
        qosoptions: false,
        timeoutvalue: "",
        upstreamHttpMethod: "",
        upstreamPathTemplate: "",
        dataReturnType: "Json",
      },
      addForm2: { url: "", header: "", body: "", data: "", flag: "POST" },
      title: "",
      Api_id: "",
      isShow: false,
      resData: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() { },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    if (this.$route.query.id) {
      this.query.filter.serverId = this.$route.query.id;
      this.Api_id = this.$route.query.id;
    }
    this.getList();
    setTimeout(() => {
      this.isShow = true;
    }, 50);
  },
  // 组件方法
  methods: {
    getList() {
      this.$post(
        baseUrl.fwIp + "/T1/api/v1/Platform/CcApi/GetList",
        this.query
      ).then((res) => {
        // console.log(res);
        this.listItem = res.data.list;
      });
    },
    open(val) {
      console.log(val);
      this.title = "添加";
      if (val) {
        this.addForm = val;
        if (this.addForm.enableratelimiting == null) {
          this.addForm.enableratelimiting = false;
        }
        this.title = val.Name;
      }
      this.dialogVisible = true;
      //   this.$post("/ServiceManage/Create", this.addForm).then((res) => {});
    },
    test(val) {
      console.log(val);
      this.title = "调试";
      if (val) {
        this.addForm2 = {
          url: "",
          flag: "POST",
          header: "",
          body: "",
          data: "",
        };
        this.addForm2.url =
          val.downstreamScheme +
          "://" +
          val.downstreamHostPort +
          val.downstreamPathTemplate;
      }
      this.dialogVisible2 = true;
    },
    handleClose() {
      this.addForm = {
        enableratelimiting: false,
        isDisabled: false,
        clientwhitelist: "",
        downstreamHostPort: "",
        downstreamPathTemplate: "",
        downstreamScheme: "",
        durationofbreak: "",
        dyOrgCode: "",
        orderIndex: "",
        port: "",
        status: 0,
        name: "",
        typeName: "",
        orderIndex: "",
        period: "",
        periodtimespan: "",
        priority: "",
        qosoptions: false,
        timeoutvalue: "",
        upstreamHttpMethod: "",
        upstreamPathTemplate: "",
        dataReturnType: "Json",
      };
      this.dialogVisible = false;
    },
    handleClose2() {
      this.addForm2 = {
        url: "",
        header: "",
        flag: "POST",
        body: "",
        data: "",
      };
      this.dialogVisible2 = false;
    },
    btn_ok() {
      console.log(this.addForm);
      this.addForm.serverId = this.Api_id;
      if (this.addForm.id) {
        this.$put(
          baseUrl.fwIp + "/T1/api/v1/Platform/CcApi/Update",
          this.addForm
        ).then((res) => {
          this.$message.success("操作成功");
          this.handleClose();
          this.getList();
        });
        return;
      } else {
        this.$post(
          baseUrl.fwIp + "/T1/api/v1/Platform/CcApi/Create",
          this.addForm
        ).then((res) => {
          this.$message.success("操作成功");
          this.handleClose();
          this.getList();
        });
        return;
      }
      // let url = this.addForm.Id
      //   ? "/ServiceManage/Update"
      //   : "/ServiceManage/Create";
      // this.$post(url, this.addForm).then((res) => {
      //   if (res.code == -1) {
      //     this.$message.error(res.msg);
      //     return;
      //   }
      //   this.$message.success("操作成功");
      //   this.handleClose();
      //   this.getList();
      // });
    },
    btn_ok2() {
      if (this.addForm2.flag == "GET") {
        $.ajax({
          url: this.addForm2.url,
          data: this.addForm2.body,
          type: "GET",
          dataType: "json",
          header: this.addForm2.header,
          cache: false, //上传文件无需缓存
          processData: false, //用于对data参数进行序列化处理 这里必须false
          contentType: false, //必须
        })
          .then((res) => {
            this.resData = res;
          })
          .catch((err) => {
            this.resData = err;
          });
      } else {
        $.ajax({
          url: this.addForm2.url,
          data: this.addForm2.body,
          type: "POST",
          dataType: "json",
          header: this.addForm2.header,
          cache: false, //上传文件无需缓存
          processData: false, //用于对data参数进行序列化处理 这里必须false
          contentType: false, //必须
        })
          .then((res) => {
            this.resData = res;
          })
          .catch((err) => {
            this.resData = err;
          });
      }
    },
    btn_change(item, val) {
      this.addForm = item;
      this.addForm.isDisabled = !val;
      this.btn_ok();
    },
    btn_change2(item, val) {
      this.addForm = item;
      this.addForm.logSwitch = val;
      this.btn_ok();
    },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$deleteF(
            baseUrl.fwIp + "/T1/api/v1/Platform/CcApi/Delete?id=" + id
          ).then((res) => {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => { });
    },
    black() {
      this.$router.push("/SystemManagement/Service_Management_3");
    },
  },
};
</script>

<style scoped lang="scss">
.Service_Management_4 {
  padding: 10px;

  .card_item {
    display: inline-block;
    margin: 5px;
  }

  .main_box {
    text-align: none;
    border: 1px solid #ccc;
    height: 800px;
    overflow: auto;
  }

  .card_item_name {
    padding: 0 5px 0 20px;
    // text-align: center;
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card_item_id {
    padding: 0 10px 0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .del {
    display: none;
    position: relative;
    margin: 0;
    padding: 0;
    text-align: right;
    margin-top: -40px;
    top: 20px;
    right: -15px;
    font-size: 26px;
    font-weight: 700;

    .todo {
      cursor: pointer;
    }
  }

  .card_item:hover .del {
    display: block;
  }
}

._card_row {
  padding: 0 20px;
  height: 30px;
  background-color: rgb(255, 255, 255);
  line-height: 30px;
  border-radius: 5px;
}

.res_box {
  min-height: 200px;
  max-height: 300px;
  overflow: auto;
  border: 1px solid #000;
  padding: 5px;
}
</style>
